<template>

    <div class="app">

        <!-- 顶部导航 -->
        <div class="nav">
            <text class="nav-title">{{title}}</text>
        </div>
        <am-tabs v-model="selected" :tabs="tabBar" tab-bar-position="bottom"></am-tabs>
        <am-native-tab-container :index.sync="selected">
            <am-native-tab-container-item v-for="(ele, gindex) in tabBarList" :key="gindex">
                <am-list
                        v-if="gindex == 0">
                    <am-list-input
                            v-model="ele.price"
                            @input="borrowChangePrice(ele)"
                            type="number"
                            align="right"
                            :title-number="7"
                            title="油品单价"
                            placeholder="请输入单价">
                        <div slot="extra" style="flex-direction: row;">
                            <am-icon v-if="ele.price" style="margin-left: 10px;"  :type="'\ue623'" @click="clearDataBorrow(ele,'price')" color="#aaa" size="xs" font-family="myIcon"></am-icon>
                            <text  class="unit">元/吨</text>
                        </div>
                    </am-list-input>
                    <am-list-input
                            v-model="ele.num"
                            @input="borrowChangeNum(ele)"
                            type="number"
                            align="right"
                            :title-number="7"
                            title="月实际销量"
                            placeholder="请输入月销量">
                        <div slot="extra" style="flex-direction: row;">
                            <am-icon v-if="ele.num" style="margin-left: 10px;" :type="'\ue623'" @click="clearDataBorrow(ele,'num')" color="#aaa" size="xs" font-family="myIcon"></am-icon>
                            <text  class="unit">吨</text>
                        </div>
                    </am-list-input>
                    <am-list-input
                            v-model="ele.dayRebateLabel"
                            align="right"
                            :title-number="8"
                            :editable="false"
                            title="返利额（税前）">
                        <text slot="extra" class="unit">元/吨•天</text>
                    </am-list-input>
                    <am-list-input
                            v-model="ele.monthRebate"
                            align="right"
                            :title-number="8"
                            :editable="false"
                            title="每吨返利额（税前）">
                        <text slot="extra" class="unit">元</text>
                    </am-list-input>
                    <am-list-input
                            v-model="ele.totalRebate"
                            align="right"
                            :title-number="8"
                            :editable="false"
                            title="月返利额（税前）">
                        <text slot="extra" class="unit">元</text>
                    </am-list-input>
                </am-list>
                <am-list
                        v-if="gindex == 1">
                    <am-list-input
                            v-model="ele.price"
                            @input="goodsChangePrice(ele)"
                            type="number"
                            align="right"
                            :title-number="7"
                            title="油品单价"
                            placeholder="请输入单价">
                        <div slot="extra" style="flex-direction: row;">
                            <am-icon v-if="ele.price" style="margin-left: 10px;"  :type="'\ue623'" @click="clearDataGoods(ele,'price')" color="#aaa" size="xs" font-family="myIcon"></am-icon>
                            <text  class="unit">元/吨</text>
                        </div>
                    </am-list-input>
                    <am-list-input
                            v-model="ele.num"
                            @input="goodsChangePrice(ele)"
                            type="number"
                            align="right"
                            :title-number="7"
                            title="月实际销量"
                            placeholder="请输入月销量">
                        <div slot="extra" style="flex-direction: row;">
                            <am-icon v-if="ele.num" style="margin-left: 10px;"  :type="'\ue623'" @click="clearDataGoods(ele,'num')" color="#aaa" size="xs" font-family="myIcon"></am-icon>
                            <text  class="unit">吨</text>
                        </div>
                    </am-list-input>
                    <am-list-input
                            v-model="ele.dayRebateLabel"
                            align="right"
                            :title-number="8"
                            :editable="false"
                            title="返利额（税前）">
                        <text slot="extra" class="unit">元/吨•天</text>
                    </am-list-input>
                    <am-list-input
                            v-model="ele.monthRebate"
                            align="right"
                            :title-number="8"
                            :editable="false"
                            title="每吨返利额（税前）">
                        <text slot="extra" class="unit">元</text>
                    </am-list-input>
                    <am-list-input
                            v-model="ele.totalRebate"
                            align="right"
                            :title-number="8"
                            :editable="false"
                            title="月返利额（税前）">
                        <text slot="extra" class="unit">元</text>
                    </am-list-input>
                </am-list>
            </am-native-tab-container-item>
        </am-native-tab-container>
    </div>

</template>

<style scoped>
    .app {
        flex: 1;
    }

    .nav {
        width: 750px;
        height: 96px;
        display: flex;
        background-color: #3EB4FF;
    }

    .nav-title {
        flex: 1;
        color: #ffffff;
        text-align: center;
        line-height: 96px;
        font-size: 32px;
        font-weight: 300;
    }

    .app-desc {
        padding: 24px;
        font-size: 36px;
    }

    .unit {
        margin-left: 10px;
        color: #7d7d7d;
        font-size: 30px;
    }
</style>
<script>
    import AmTabs from "../weex-amui/packages/am-tabs/index";
    import AmNativeTabContainer from "../weex-amui/packages/am-native-tab-container/index";
    import AmNativeTabContainerItem from "../weex-amui/packages/am-native-tab-container/item";
    import AmList from "../weex-amui/packages/am-list/index";
    import AmListInput from "../weex-amui/packages/am-list-input/index";
    import AmButton from "Amui/packages/am-button/index";
    import AmIcon from "Amui/packages/am-icon/index";

    const dom = weex.requireModule('dom');

    const eeui = app.requireModule('eeui');

    export default {
        components: {AmIcon, AmButton, AmListInput, AmList, AmNativeTabContainerItem, AmNativeTabContainer, AmTabs},
        data() {
            return {
                title: '营销工具-借钱借货计算器',
                selected: 0,
                tabBar: ['借钱', '借货'],
                tabBarList: [
                    {
                        price: '',
                        num: '',
                        dayRebate: '',
                        dayRebateLabel: '',
                        monthRebate: '',
                        totalRebate: ''
                    },
                    {
                        orderStatus: 'buyer_all'
                    },
                    {
                       num: '', // 代采吨数
                        price: '', // 代采价格
                        day: 30, // 垫资天数
                        service: 30, // 服务费
                        payInProp: 80, // 垫资比例
                        totalMon: '', // 总价
                        advanceMon: '', // 预付款
                        payIn: '', // 垫资
                        rates: '' //  利息
                    }
                ]
            }
        },

        appActive(data) {
            //APP进入前台：App从【后台】切换至【前台】时触发
        },

        appDeactive(data) {
            //APP进入后台：App从【前台】切换至【后台】时触发
        },

        pageReady(data) {
            //页面挂载：页面【渲染完成】时触发
        },

        pageResume(data) {
            //页面激活：页面【恢复】时触发（渲染完成时也会触发1次）
        },

        pagePause(data) {
            //页面失活：页面【暂停】时触发
        },

        pageDestroy(data) {
            //页面停止：页面【销毁】时触发
        },

        mounted() {
            this.beforeCreate();
        },

        methods: {
            /**
             * 打开新页面
             * @param jsPageName    (String)JS页面名称
             * @param params        (Object)传递参数
             */
            goForward(jsPageName, params) {
                eeui.openPage({
                    url: str + ".js",
                    pageType: "app",
                    statusBarColor: "#3EB4FF",
                    params: params ? params : {}
                });
            },

            /**
             * 返回上一页(关闭当前页)
             */
            goBack() {
                eeui.closePage();
            },
            /**
             * 借钱-价格变化
             */
            borrowChangePrice(ele) {
                ele.dayRebate = ele.price * 0.8 * 0.027 / 100 * 0.4 * 0.3
                ele.dayRebateLabel = ele.dayRebate.toFixed(2)
                ele.dayRebateLabel = ele.dayRebate === 0 ? '' : ele.dayRebateLabel
                this.borrowChangeNum(ele)
            },
            /**
             * 借钱-吨数变化
             */
            borrowChangeNum(ele) {
                if (ele.dayRebate && ele.dayRebate > 0) {
                    let rt = ele.dayRebate * 30
                    let result = ''
                    if (ele.num < 1000) {
                        result = rt
                    } else if (1000 <= ele.num && ele.num < 2000) {
                        result = rt * 1.1
                    } else if (2000 <= ele.num && ele.num < 3000) {
                        result = rt * 1.2
                    } else {
                        result = rt * 1.3
                    }
                    if (result) {
                        ele.monthRebate = result.toFixed(2)
                        let total = ele.monthRebate * ele.num
                        ele.totalRebate = total.toFixed(2)
                    }
                } else {
                    ele.monthRebate = ''
                    ele.totalRebate = ''
                }
            },
            /**
             * 借钱-价格变化
             */
            goodsChangePrice(ele) {
                ele.dayRebate = ele.price * 0.027 / 100 * 0.3
                ele.dayRebateLabel = ele.dayRebate.toFixed(2)
                ele.dayRebateLabel = ele.dayRebate === 0 ? '' : ele.dayRebateLabel
                this.goodsChangeNum(ele)
            },
            /**
             * 借货-吨数变化
             */
            goodsChangeNum(ele) {
                if (ele.dayRebate && ele.dayRebate > 0) {
                    let rt = ele.dayRebate * 30
                    let result = ''
                    if (ele.num < 1000) {
                        result = rt
                    } else if (1000 <= ele.num && ele.num < 2000) {
                        result = rt * 1.1
                    } else if (2000 <= ele.num && ele.num < 3000) {
                        result = rt * 1.2
                    } else {
                        result = rt * 1.3
                    }
                    if (result) {
                        ele.monthRebate = result.toFixed(2)
                        let total = ele.monthRebate * ele.num
                        ele.totalRebate = total.toFixed(2)
                    }
                } else {
                    ele.monthRebate = ''
                    ele.totalRebate = ''
                }
            },
            beforeCreate () {
                // 添加自己的图标文件
                dom.addRule('fontFace', {
                    'fontFamily': 'myIcon', // 与 <am-icon/> 组件的 fontFamily 属性对应
                    'src': "url('https://at.alicdn.com/t/font_1642132_l1aitreu4sb.ttf')"
                })
            },
            clearDataBorrow(ele,type){
                this.$set(ele,type,'')
                if (type === 'price') {
                    this.borrowChangePrice(ele)
                }else{
                    this.borrowChangeNum(ele)
                }
            },
            clearDataGoods(ele,type){
                this.$set(ele,type,'')
                if (type === 'price') {
                    this.goodsChangePrice(ele)
                }else{
                    this.goodsChangeNum(ele)
                }
            },
            /**
             * 垫资自动计算
             */
            purchaseComp(ele){
                console.info(JSON.stringify(3333))
                if (!ele.num || ele.num === 0) {
                    ele.totalMon = ''
                    ele.advanceMon = ''
                    ele.payIn = ''
                    ele.rates = ''
                    return
                }
                console.info(JSON.stringify(3334443))
                if (!ele.price || ele.price === 0) {
                    ele.totalMon = ''
                    ele.advanceMon = ''
                    ele.payIn = ''
                    ele.rates = ''
                    return
                }
                console.info(JSON.stringify(5555))
                console.info(JSON.stringify(ele.service))
                if (!ele.service || ele.service === 0) {
                    ele.totalMon = ''
                    ele.advanceMon = ''
                    ele.payIn = ''
                    ele.rates = ''
                    return;
                }
                console.info(JSON.stringify(6666))
                ele.totalMon = ele.num * (parseFloat(ele.price) + parseFloat(ele.service))
                ele.totalMon = ele.totalMon.toFixed(2)

                if (!ele.payInProp || ele.payInProp === 0) {
                    ele.advanceMon = ''
                    ele.payIn = ''
                    ele.rates = ''
                    return;
                }
                ele.advanceMon = ele.totalMon * (1 - parseFloat(ele.payInProp)/100)
                ele.advanceMon = ele.advanceMon.toFixed(2)

                if (!ele.day || ele.day === 0) {
                    ele.payIn = ''
                    ele.rates = ''
                    return;
                }

                ele.payIn = ele.totalMon * parseFloat(ele.payInProp)/100
                ele.payIn = ele.payIn.toFixed(2)
                ele.rates = ele.payIn * 0.1 * parseFloat(ele.day) / 365
                ele.rates = ele.rates.toFixed(2)
            },
            /**
             * 验证天数
             */
            validateDay(ele){
                if (!ele.day || ele.day === 0) {
                    return
                }
                if (ele.day > 365) {
                    ele.day = 365
                }
                this.purchaseComp(ele)``
            },
            purchaseClear(ele,name){
                ele[name] = ''
                this.purchaseComp(ele)
            }
        }
    }


</script>
